<!DOCTYPE html>
<html lang="en" class="h-full" data-theme="light">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Paperless-AI Dashboard</title>
    <script src="https://cdn.tailwindcss.com/3.4.16"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.0/css/all.min.css">
    <link rel="stylesheet" href="css/dashboard.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/tippy.js@6/dist/tippy.css" />
    <script src="https://unpkg.com/@popperjs/core@2"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tippy.js/6.3.2/tippy.umd.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.15.0/Sortable.min.js"></script>
    <style>
        /* Content Header Dark Mode Fixes */
        .content-header {
            transition: background-color 0.3s ease, color 0.3s ease;
        }

        [data-theme="light"] .content-header {
            background-color: var(--bg-primary);
            color: var(--text-primary);
        }

        [data-theme="dark"] .content-header {
            background-color: var(--bg-secondary);
            color: var(--text-primary);
        }

        /* API Key Container Dark Mode Fixes */
        [data-theme="light"] #apiKeyContainer {
            background-color: var(--stat-box-bg);
            color: var(--text-primary);
        }

        [data-theme="dark"] #apiKeyContainer {
            background-color: var(--bg-secondary);
            color: var(--text-primary);
        }

        /* Regenerate Button Dark Mode Fixes */
        [data-theme="dark"] #regenerateBtn {
            background-color: var(--accent-primary);
        }

        [data-theme="dark"] #regenerateBtn:hover {
            background-color: var(--accent-secondary);
        }

        /* Copy Notification Dark Mode Fixes */
        [data-theme="light"] #copyNotification {
            background-color: #ecfdf5;
            border-color: #d1fae5;
            color: #065f46;
        }

        [data-theme="dark"] #copyNotification {
            background-color: rgba(6, 95, 70, 0.2);
            border-color: rgba(6, 95, 70, 0.3);
            color: #34d399;
        }

        /* Content Title Dark Mode Fixes */
        [data-theme="light"] .content-title {
            color: var(--text-primary);
        }

        [data-theme="dark"] .content-title {
            color: var(--text-primary);
        }
    </style>
</head>
<body class="h-full">
    
    
    <button id="themeToggle" class="theme-toggle">
        <i class="fas fa-moon dark:fas fa-sun"></i>
    </button>
    
    <div class="layout-container">
        <button id="mobileMenuButton" class="mobile-menu-button">
            <i class="fas fa-bars"></i>
        </button>
        <!-- Sidebar -->
        <div id="sidebarOverlay" class="sidebar-overlay"></div>
        <aside class="sidebar">
            <div class="sidebar-header">
                <img src="/favicon.ico" class="no-invert" alt="Paperless AI Logo" style="height: 60px;">
                <h1 class="brand-title">Paperless-AI<small style="display: block;"><%= version %></small></h1>
            </div>

            <nav class="sidebar-nav">
                <ul>
                    <li>
                        <a href="/dashboard" class="sidebar-link">
                            <i class="fas fa-home"></i>
                            <span>Dashboard</span>
                        </a>
                    </li>
                    <li>
                        <a href="/manual" class="sidebar-link">
                            <i class="fas fa-file-alt"></i>
                            <span>Manual</span>
                        </a>
                    </li>
                    <li>
                        <a href="/chat" class="sidebar-link">
                            <i class="fa-solid fa-comment"></i>
                            <span>Chat</span>
                        </a>
                    </li>
                    <li>
                        <a href="/rag" class="sidebar-link">
                            <i class="fa-solid fa-comment"></i>
                            <span>RAG Chat</span>
                        </a>
                    </li>                     
                    <li>
                        <a href="/playground" class="sidebar-link">
                            <i class="fa-solid fa-flask-vial"></i>
                            <span>Playground</span>
                        </a>
                    </li>
                    <li>
                        <a href="/history" class="sidebar-link">
                            <i class="fa-solid fa-clock-rotate-left"></i>
                            <span>History</span>
                        </a>
                    </li>
                    <li>
                        <a href="/settings" class="sidebar-link active">
                            <i class="fas fa-cog"></i>
                            <span>Settings</span>
                        </a>
                    </li>
                    <li>
                        <a href="/logout" class="sidebar-link">
                            <i class="fa-solid fa-right-from-bracket"></i>
                            <span>Logout</span>
                        </a>
                    </li>
                </ul>
                <a href="https://github.com/clusterzx/paperless-ai" 
                class="github-button" 
                style="position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);">
                <span class="star-button">
                    <svg class="star-icon" height="16" width="16" viewBox="0 0 16 16">
                        <path d="M8 .25a.75.75 0 01.673.418l1.882 3.815 4.21.612a.75.75 0 01.416 1.279l-3.046 2.97.719 4.192a.75.75 0 01-1.088.791L8 12.347l-3.766 1.98a.75.75 0 01-1.088-.79l.72-4.194L.818 6.374a.75.75 0 01.416-1.28l4.21-.611L7.327.668A.75.75 0 018 .25z"></path>
                    </svg>
                    Star
                </span>
                <span id="starCount" class="star-count">1.2k</span>
            </a>
            <p style="position: absolute; bottom: 50px; left: 50%; transform: translateX(-50%); font-size: 10px; color: #555; text-align: center;">
                Please support us on GitHub
            </p>
            </nav>
        </aside>

        <!-- Main Content -->
        <main class="main-content">
            <div class="content-wrapper">
                <div class="content-header flex justify-between items-center px-6 py-4 bg-white dark:bg-gray-800 shadow-sm">
                    <h2 class="content-title text-2xl font-semibold text-gray-800 dark:text-white">Configuration</h2>
                    <div class="relative flex items-center space-x-4">API-KEY:
                        <div id="apiKeyContainer" 
                             class="relative w-48 px-4 py-2 bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-100 rounded cursor-pointer select-none filter blur-sm hover:blur-none transition-all duration-200 truncate"
                             data-api-key="<%= config.API_KEY %>"
                             title="<%= config.API_KEY %>">
                             <%= config.API_KEY %>
                        </div>
                        <button id="regenerateBtn" 
                                class="px-3 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 dark:hover:bg-blue-700 transition-colors duration-200 flex items-center space-x-2">
                            <i class="fas fa-sync-alt" id="regenerateIcon"></i>
                            <span>Regenerate</span>
                        </button>
                        <div id="copyNotification" 
                             class="absolute right-0 top-0 mt-12 w-64 bg-green-50 dark:bg-green-900 text-green-800 dark:text-green-100 border border-green-200 dark:border-green-700 rounded-lg p-3 hidden">
                            <div class="flex items-center">
                                <i class="fas fa-check-circle mr-2"></i>
                                <span>API key copied to clipboard!</span>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Main Form Card -->
                <div class="material-card">
                    <% if (success || settingsError) { %>
                        <div class="mb-6 space-y-4">
                            <% if (success) { %>
                                <div class="flex gap-2 p-4 bg-green-50 text-green-800 border border-green-200 rounded-lg">
                                    <i class="fas fa-check-circle mt-1"></i>
                                    <p><%= success %></p>
                                </div>
                            <% } %>
                            
                            <% if (settingsError) { %>
                                <div class="flex gap-2 p-4 bg-red-50 text-red-800 border border-red-200 rounded-lg">
                                    <i class="fas fa-exclamation-triangle mt-1"></i>
                                    <p><%= settingsError %></p>
                                </div>
                            <% } %>
                        </div>
                    <% } %>
                    <form id="setupForm" class="space-y-8">
                        <!-- Connection Section -->
                        <section class="space-y-6">
                            <h2 class="text-xl font-bold flex items-center gap-2 text-primary mb-4">
                                <i class="fas fa-link"></i>
                                Connection Settings
                            </h2>
                            <div class="space-y-4">
                                <div class="space-y-2">
                                    <label for="paperlessUrl" class="flex items-center gap-2 text-sm font-medium">
                                        Paperless-ngx API URL
                                        <button type="button" class="text-gray-400 hover:text-gray-600 focus:outline-none" id="urlHelp">
                                            <i class="fas fa-circle-question"></i>
                                        </button>
                                    </label>
                                    <input type="text" 
                                           id="paperlessUrl" 
                                           name="paperlessUrl"
                                           value="<%= config.PAPERLESS_API_URL %>"
                                           class="w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                                           placeholder="http://your-paperless-instance:8000"
                                           required>
                                </div>
        
                                <div class="space-y-2">
                                    <label for="paperlessToken" class="text-sm font-medium">API Token</label>
                                    <div class="relative">
                                        <input type="password" 
                                               id="paperlessToken" 
                                               name="paperlessToken"
                                               value="<%= config.PAPERLESS_API_TOKEN %>"
                                               class="w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                                               required>
                                        <button type="button" class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600" data-input="paperlessToken">
                                            <i class="fas fa-eye"></i>
                                        </button>
                                    </div>
                                </div>

                                <div class="space-y-2">
                                    <label for="paperlessUsername" class="flex items-center gap-2 text-sm font-medium">
                                        Paperless-ngx Username
                                    </label>
                                    <input type="text" 
                                           id="paperlessUsername" 
                                           name="paperlessUsername"
                                           value="<%= config.PAPERLESS_USERNAME %>"
                                           class="w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                                           placeholder="Your Paperless-ngx username"
                                           required>
                                </div>                                
                            </div>
                        </section>
        
                        <!-- AI Configuration Section -->
                        <section class="space-y-6">
                            <h2 class="text-xl font-bold flex items-center gap-2 text-primary mb-4">
                                <i class="fas fa-robot"></i>
                                AI Configuration
                            </h2>
                            <div class="space-y-4">
                                <div class="space-y-2">
                                    <label for="aiProvider" class="text-sm font-medium">AI Provider</label>
                                    <select id="aiProvider" 
                                            name="aiProvider"
                                            class="w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                                        <option value="openai" <%= config.AI_PROVIDER === 'openai' ? 'selected' : '' %>>OpenAI (ChatGPT)</option>
                                        <option value="ollama" <%= config.AI_PROVIDER === 'ollama' ? 'selected' : '' %>>Ollama (Local LLM)</option>
                                        <option value="custom" <%= config.AI_PROVIDER === 'custom' ? 'selected' : '' %>>Custom</option>
                                        <option value="azure" <%= config.AI_PROVIDER === 'azure' ? 'selected' : '' %>>Azure</option>
                                    </select>
                                </div>

                                <!-- OpenAI Settings -->
                                <div id="openaiSettings" class="space-y-4">
                                    <div class="space-y-2">
                                        <label for="openaiKey" class="text-sm font-medium">OpenAI API Key</label>
                                        <div class="relative">
                                            <input type="password" 
                                                id="openaiKey" 
                                                name="openaiKey"
                                                value="<%= config.OPENAI_API_KEY %>"
                                                class="w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                                            <button type="button" class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600" data-input="openaiKey">
                                                <i class="fas fa-eye"></i>
                                            </button>
                                        </div>
                                    </div>
                                    
                                    <div class="space-y-2">
                                        <label for="openaiModel" class="text-sm font-medium">OpenAI Model</label>
                                        <select id="openaiModel" 
                                                name="openaiModel"
                                                class="w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                                            <option value="gpt-3.5-turbo-0125" <%= config.OPENAI_MODEL === 'gpt-3.5-turbo-0125' ? 'selected' : '' %>>GPT-3.5 Turbo</option>
                                            <option value="gpt-4o" <%= config.OPENAI_MODEL === 'gpt-4o' ? 'selected' : '' %>>GPT-4o</option>
                                            <option value="o3-mini" <%= config.OPENAI_MODEL === 'o3-mini' ? 'selected' : '' %>>o3-mini</option>
                                            <option value="gpt-4o-mini" <%= config.OPENAI_MODEL === 'gpt-4o-mini' ? 'selected' : '' %>>GPT-4o-mini (Best value)</option>
                                        </select>
                                    </div>
                                </div>

                                <!-- Ollama Settings -->
                                <div id="ollamaSettings" class="space-y-4">
                                    <div class="space-y-2">
                                        <label for="ollamaUrl" class="text-sm font-medium">Ollama API URL</label>
                                        <input type="text" 
                                            id="ollamaUrl"
                                            name="ollamaUrl"
                                            value="<%= config.OLLAMA_API_URL %>"
                                            class="w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                                    </div>
                                    
                                    <div class="space-y-2">
                                        <label for="ollamaModel" class="text-sm font-medium">Ollama Model</label>
                                        <input type="text" 
                                            id="ollamaModel" 
                                            name="ollamaModel"
                                            value="<%= config.OLLAMA_MODEL %>"
                                            class="w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                                    </div>
                                </div>

                                <!-- Custom Provider Settings -->
                                <div id="customSettings" class="space-y-4">
                                    <div class="space-y-2">
                                        <label for="customBaseUrl" class="text-sm font-medium">Base URL</label>
                                        <input type="text" 
                                            id="customBaseUrl" 
                                            name="customBaseUrl"
                                            value="<%= config.CUSTOM_BASE_URL %>"
                                            class="w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                                            placeholder="https://api.example.com">
                                    </div>

                                    <div class="space-y-2">
                                        <label for="customApiKey" class="text-sm font-medium">API Key</label>
                                        <div class="relative">
                                            <input type="password" 
                                                id="customApiKey" 
                                                name="customApiKey"
                                                value="<%= config.CUSTOM_API_KEY %>"
                                                class="w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                                            <button type="button" class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600" data-input="customApiKey">
                                                <i class="fas fa-eye"></i>
                                            </button>
                                        </div>
                                    </div>

                                    <div class="space-y-2">
                                        <label for="customModel" class="text-sm font-medium">Model</label>
                                        <input type="text" 
                                            id="customModel" 
                                            name="customModel"
                                            value="<%= config.CUSTOM_MODEL %>"
                                            class="w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                                            placeholder="Enter model name">
                                    </div>
                                </div>

                                <!-- Azure Settings -->
                                <div id="azureSettings" class="space-y-4">
                                    <div class="space-y-2">
                                        <label for="azureEndpoint">Endpoint</label>
                                        <input type="text" 
                                               id="azureEndpoint" 
                                               name="azureEndpoint"
                                               value="<%= config.AZURE_ENDPOINT %>"
                                               class="w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                                               placeholder="https://api.example.com">
                                    </div>
                                    
                                    <div class="space-y-2">
                                        <label for="azureApiKey">API Key</label>
                                        <div class="relative">
                                            <input type="password" 
                                                   id="azureApiKey" 
                                                   name="azureApiKey"
                                                   value="<%= config.AZURE_API_KEY %>"
                                                   class="w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                                            <button type="button" class="password-toggle" data-input="azureApiKey">
                                                <i class="fas fa-eye"></i>
                                            </button>
                                        </div>
                                    </div>
                                    
                                    <div class="space-y-2">
                                        <label for="azureDeploymentName">Deployment</label>
                                        <input type="text" 
                                               id="azureDeploymentName" 
                                               name="azureDeploymentName"
                                               value="<%= config.AZURE_DEPLOYMENT_NAME %>"
                                               class="w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                                               placeholder="Enter deployment name">
                                    </div>

                                    <div class="space-y-2">
                                        <label for="azureApiVersion">API Version</label>
                                        <input type="text" 
                                               id="azureApiVersion" 
                                               name="azureApiVersion"
                                               value="<%= config.AZURE_API_VERSION %>"
                                               class="w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                                               placeholder="Enter API version">
                                    </div>
                                </div>

                                <!-- Token Limit Field -->
                                <div class="space-y-2">
                                    <label for="tokenLimit">Token Limit</label>
                                    <input type="number" 
                                        id="tokenLimit" 
                                        name="tokenLimit"
                                        value="<%= config.TOKEN_LIMIT %>"
                                        class="w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                                        placeholder="Enter token limit of model">
                                </div>

                                <!--  Response Tokens Field -->
                                <div class="space-y-2">
                                    <label for="responseTokens">Response Tokens</label>
                                    <input type="number" 
                                        id="responseTokens" 
                                        name="responseTokens"
                                        value="<%= config.RESPONSE_TOKENS %>"
                                        class="w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                                        placeholder="Enter approximate token amount for response">
                                </div>
                            </div>
                        </section>
        
                        <!-- Advanced Settings Section -->
                        <section class="space-y-6">
                            <h2 class="text-xl font-bold flex items-center gap-2 text-primary mb-4">
                                <i class="fas fa-cog"></i>
                                Advanced Settings
                            </h2>
                            <div class="space-y-2">
                                <div class="form-group">
                                    <label for="useExistingData">Use existing Correspondents and Tags?</label>
                                    <select id="useExistingData" 
                                            name="useExistingData" 
                                            class="w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                                        <option value="no" <%= config.USE_EXISTING_DATA === 'no' ? 'selected' : '' %>>No</option>
                                        <option value="yes" <%= config.USE_EXISTING_DATA === 'yes' ? 'selected' : '' %>>Yes</option>
                                    </select>
                                </div>
                                <div class="space-y-2">
                                    <label for="scanInterval" class="text-sm font-medium">Scan Interval (Cron Format)</label>
                                    <input type="text" 
                                           id="scanInterval" 
                                           name="scanInterval"
                                           value="<%= config.SCAN_INTERVAL %>"
                                           class="w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                                           required>
                                    <p class="text-sm text-gray-500">Default: every 30 minutes</p>
                                </div>
        
                                <!-- Tags Section -->
                                <div class="space-y-4">
                                    <div class="space-y-2">
                                        <label for="showTags" class="text-sm font-medium">Process only specific pre tagged documents?</label>
                                        <select id="showTags" 
                                                name="showTags" 
                                                class="w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                                            <option value="no" <%= config.PROCESS_PREDEFINED_DOCUMENTS === 'no' ? 'selected' : '' %>>No</option>
                                            <option value="yes" <%= config.PROCESS_PREDEFINED_DOCUMENTS === 'yes' ? 'selected' : '' %>>Yes</option>
                                        </select>
                                    </div>
        
                                    <div id="tagsInputSection" class="<%= config.PROCESS_PREDEFINED_DOCUMENTS === 'yes' ? '' : 'hidden' %> space-y-4">
                                        <div class="space-y-2">
                                            <label for="tagInput" class="text-sm font-medium">Tags</label>
                                            <div class="flex gap-2">
                                                <input type="text" 
                                                    id="tagInput" 
                                                    class="flex-1 px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                                                    placeholder="Enter a tag and press Enter">
                                                <button type="button" 
                                                        class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
                                                    <i class="fas fa-plus mr-2"></i>
                                                    Add
                                                </button>
                                            </div>
                                            <div id="tagsContainer" class="flex flex-wrap gap-2 mt-2">
                                                <% if (config.TAGS && Array.isArray(config.TAGS) && config.TAGS.length > 0) { %>
                                                    <% config.TAGS.forEach(tag => { %>
                                                        <div class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full flex items-center gap-2">
                                                            <span><%= tag %></span>
                                                            <button type="button" class="hover:text-blue-600"><i class="fas fa-times"></i></button>
                                                        </div>
                                                    <% }); %>
                                                <% } %>
                                            </div>
                                            <input type="hidden" id="tags" name="tags" value="<%= Array.isArray(config.TAGS) ? config.TAGS.join(',') : '' %>">
                                        </div>
                                    </div>
                                </div>
        
                                <!-- Tag & Correspondent Restrictions Section -->
                                <div class="border-t pt-4 space-y-4">
                                    <div class="space-y-2">
                                        <h3 class="text-lg font-medium flex items-center gap-2 text-primary">
                                            <i class="fas fa-filter"></i>
                                            AI Restrictions
                                        </h3>
                                        
                                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                            <div class="border border-gray-200 shadow-sm rounded-lg hover:border-blue-500 transition-colors duration-200">
                                                <label for="restrictToExistingTags" class="flex items-center p-4 cursor-pointer w-full">
                                                    <input type="checkbox" 
                                                        id="restrictToExistingTags" 
                                                        name="restrictToExistingTags" 
                                                        class="w-5 h-5 text-blue-600 rounded border-gray-300 focus:ring-blue-500"
                                                        <%= config.RESTRICT_TO_EXISTING_TAGS === 'yes' ? 'checked' : '' %>>
                                                    <div class="ml-3">
                                                        <div class="flex items-center text-gray-900 font-medium">
                                                            <i class="fas fa-tags mr-2 text-blue-500"></i>
                                                            Restrict to Existing Tags
                                                        </div>
                                                        <p class="text-sm text-gray-500 mt-1">AI will only use tags that already exist in Paperless-ngx</p>
                                                    </div>
                                                </label>
                                            </div>
                                            
                                            <div class="border border-gray-200 shadow-sm rounded-lg hover:border-blue-500 transition-colors duration-200">
                                                <label for="restrictToExistingCorrespondents" class="flex items-center p-4 cursor-pointer w-full">
                                                    <input type="checkbox" 
                                                        id="restrictToExistingCorrespondents" 
                                                        name="restrictToExistingCorrespondents" 
                                                        class="w-5 h-5 text-blue-600 rounded border-gray-300 focus:ring-blue-500"
                                                        <%= config.RESTRICT_TO_EXISTING_CORRESPONDENTS === 'yes' ? 'checked' : '' %>>
                                                    <div class="ml-3">
                                                        <div class="flex items-center text-gray-900 font-medium">
                                                            <i class="fas fa-user mr-2 text-blue-500"></i>
                                                            Restrict to Existing Correspondents
                                                        </div>
                                                        <p class="text-sm text-gray-500 mt-1">AI will only use correspondents that already exist in Paperless-ngx</p>
                                                    </div>
                                                </label>
                                            </div>
                                        </div>
                                        
                                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
                                            <div class="border border-gray-200 shadow-sm rounded-lg hover:border-blue-500 transition-colors duration-200">
                                                <label for="restrictToExistingDocumentTypes" class="flex items-center p-4 cursor-pointer w-full">
                                                    <input type="checkbox" 
                                                        id="restrictToExistingDocumentTypes" 
                                                        name="restrictToExistingDocumentTypes" 
                                                        class="w-5 h-5 text-blue-600 rounded border-gray-300 focus:ring-blue-500"
                                                        <%= config.RESTRICT_TO_EXISTING_DOCUMENT_TYPES === 'yes' ? 'checked' : '' %>>
                                                    <div class="ml-3">
                                                        <div class="flex items-center text-gray-900 font-medium">
                                                            <i class="fas fa-file-alt mr-2 text-blue-500"></i>
                                                            Restrict to Existing Document Types
                                                        </div>
                                                        <p class="text-sm text-gray-500 mt-1">AI will only use document types that already exist in Paperless-ngx</p>
                                                    </div>
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                                <!-- External API Integration Section -->
                                <div class="border-t pt-4 space-y-4">
                                    <div class="space-y-2">
                                        <h3 class="text-lg font-medium flex items-center gap-2 text-primary">
                                            <i class="fas fa-plug"></i>
                                            External API Integration
                                        </h3>
                                        
                                        <div class="border border-gray-200 shadow-sm rounded-lg hover:border-blue-500 transition-colors duration-200 mb-4">
                                            <label for="externalApiEnabled" class="flex items-center p-4 cursor-pointer w-full">
                                                <input type="checkbox" 
                                                    id="externalApiEnabled" 
                                                    name="externalApiEnabled" 
                                                    class="w-5 h-5 text-blue-600 rounded border-gray-300 focus:ring-blue-500"
                                                    <%= config.EXTERNAL_API_ENABLED === 'yes' ? 'checked' : '' %>>
                                                <div class="ml-3">
                                                    <div class="flex items-center text-gray-900 font-medium">
                                                        <i class="fas fa-globe mr-2 text-blue-500"></i>
                                                        Enable External API Integration
                                                    </div>
                                                    <p class="text-sm text-gray-500 mt-1">Enrich AI prompts with data from external API</p>
                                                </div>
                                            </label>
                                        </div>
                                        
                                        <div id="externalApiSettings" class="space-y-4 <%= config.EXTERNAL_API_ENABLED === 'yes' ? '' : 'hidden' %>">
                                            <div class="space-y-2">
                                                <label for="externalApiUrl" class="text-sm font-medium">API URL</label>
                                                <input type="text" 
                                                    id="externalApiUrl" 
                                                    name="externalApiUrl"
                                                    value="<%= config.EXTERNAL_API_URL || '' %>"
                                                    class="w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                                                    placeholder="https://api.example.com/data">
                                            </div>
                                            
                                            <div class="space-y-2">
                                                <label for="externalApiMethod" class="text-sm font-medium">HTTP Method</label>
                                                <select id="externalApiMethod" 
                                                        name="externalApiMethod"
                                                        class="w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                                                    <option value="GET" <%= config.EXTERNAL_API_METHOD === 'GET' ? 'selected' : '' %>>GET</option>
                                                    <option value="POST" <%= config.EXTERNAL_API_METHOD === 'POST' ? 'selected' : '' %>>POST</option>
                                                    <option value="PUT" <%= config.EXTERNAL_API_METHOD === 'PUT' ? 'selected' : '' %>>PUT</option>
                                                </select>
                                            </div>
                                            
                                            <div class="space-y-2">
                                                <label for="externalApiHeaders" class="text-sm font-medium">Headers (JSON)</label>
                                                <textarea id="externalApiHeaders"  
                                                          name="externalApiHeaders"
                                                          rows="3"
                                                          class="w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                                                          placeholder='{"Content-Type": "application/json", "Authorization": "Bearer YOUR_TOKEN"}'><%= config.EXTERNAL_API_HEADERS || '' %></textarea>
                                            </div>
                                            
                                            <div class="space-y-2">
                                                <label for="externalApiBody" class="text-sm font-medium">Request Body (JSON) - For POST/PUT</label>
                                                <textarea id="externalApiBody" 
                                                          name="externalApiBody"
                                                          rows="3"
                                                          class="w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                                                          placeholder='{"query": "your_query", "filters": {"key": "value"}}'><%= config.EXTERNAL_API_BODY || '' %></textarea>
                                            </div>
                                            
                                            <div class="space-y-2">
                                                <label for="externalApiTimeout" class="text-sm font-medium">Timeout (milliseconds)</label>
                                                <input type="number" 
                                                       id="externalApiTimeout" 
                                                       name="externalApiTimeout"
                                                       value="<%= config.EXTERNAL_API_TIMEOUT || '5000' %>"
                                                       class="w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                                                       placeholder="5000">
                                            </div>
                                            
                                            <div class="space-y-2">
                                                <label for="externalApiTransform" class="text-sm font-medium">Transform Function (JavaScript)</label>
                                                <textarea id="externalApiTransform" 
                                                          name="externalApiTransform"
                                                          rows="5"
                                                          class="w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                                                          placeholder="// Function to transform API response
// Return the data you want to include in the prompt
function transform(data) {
  return data;
}"><%= config.EXTERNAL_API_TRANSFORM || '// Function to transform API response\n// Return the data you want to include in the prompt\nfunction transform(data) {\n  return data;\n}' %></textarea>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                                <!-- AI Tag Section -->
                                <div class="border-t pt-4 space-y-4">
                                    <div class="space-y-2">
                                        <label for="aiProcessedTag" class="text-sm font-medium">Add AI-processed tag to documents?</label>
                                        <select id="aiProcessedTag" 
                                                name="aiProcessedTag" 
                                                class="w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                                            <option value="no" <%= config.ADD_AI_PROCESSED_TAG === 'no' ? 'selected' : '' %>>No</option>
                                            <option value="yes" <%= config.ADD_AI_PROCESSED_TAG === 'yes' ? 'selected' : '' %>>Yes</option>
                                        </select>
                                    </div>
        
                                    <div id="aiTagNameSection" class="<%= config.ADD_AI_PROCESSED_TAG === 'yes' ? '' : 'hidden' %> space-y-2">
                                        <label for="aiTagName" class="text-sm font-medium">AI-processed Tag Name</label>
                                        <input type="text" 
                                            id="aiTagName" 
                                            name="aiTagName"
                                            value="<%= config.AI_PROCESSED_TAG_NAME || 'ai-processed' %>"
                                            class="w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                                            placeholder="ai-processed">
                                        <p class="text-sm text-gray-500">This tag will be added to documents after AI processing</p>
                                    </div>
                                </div>
        
                                <!-- Prompt Tags Section -->
                                <div class="border-t pt-4 space-y-4">
                                    <div class="space-y-2">
                                        <label for="usePromptTags" class="text-sm font-medium">Use specific tags in prompt?</label>
                                        <select id="usePromptTags" 
                                                name="usePromptTags" 
                                                class="w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                                            <option value="no" <%= config.USE_PROMPT_TAGS === 'no' ? 'selected' : '' %>>No</option>
                                            <option value="yes" <%= config.USE_PROMPT_TAGS === 'yes' ? 'selected' : '' %>>Yes</option>
                                        </select>
                                    </div>
        
                                    <div id="promptTagsSection" class="<%= config.USE_PROMPT_TAGS === 'yes' ? '' : 'hidden' %> space-y-4">
                                        <div class="space-y-2">
                                            <label for="promptTagInput" class="text-sm font-medium">Prompt Tags</label>
                                            <div class="flex gap-2">
                                                <input type="text" 
                                                    id="promptTagInput" 
                                                    class="flex-1 px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                                                    placeholder="Enter a tag and press Enter">
                                                <button type="button" 
                                                        class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
                                                    <i class="fas fa-plus mr-2"></i>
                                                    Add
                                                </button>
                                            </div>
                                            <div id="promptTagsContainer" class="flex flex-wrap gap-2 mt-2">
                                                <% if (config.PROMPT_TAGS && Array.isArray(config.PROMPT_TAGS) && config.PROMPT_TAGS.length > 0) { %>
                                                    <% config.PROMPT_TAGS.forEach(tag => { %>
                                                        <div class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full flex items-center gap-2">
                                                            <span><%= tag %></span>
                                                            <button type="button" class="hover:text-blue-600"><i class="fas fa-times"></i></button>
                                                        </div>
                                                    <% }); %>
                                                <% } %>
                                            </div>
                                            <input type="hidden" id="promptTags" name="promptTags" value="<%= Array.isArray(config.PROMPT_TAGS) ? config.PROMPT_TAGS.join(',') : '' %>">
                                            <p class="text-sm text-gray-500">These tags will be exclusively used in the AI prompt</p>
                                        </div>
                                    </div>
                                </div>
                                <hr/>
                                <!-- Automatic Processing Section -->
                                <div class="border-t pt-4 space-y-4">
                                    <div class="space-y-2">
                                        <label for="disableAutomaticProcessing" class="text-sm font-medium">Disable automatic processing?</label>
                                        <div class="border border-gray-200 shadow-sm rounded-lg hover:border-blue-500 transition-colors duration-200">
                                            <label for="disableAutomaticProcessing" class="flex items-center p-4 cursor-pointer w-full">
                                                <input type="checkbox" 
                                                    id="disableAutomaticProcessing" 
                                                    class="w-5 h-5 text-blue-600 rounded border-gray-300 focus:ring-blue-500"
                                                    <%= config.DISABLE_AUTOMATIC_PROCESSING === 'yes' ? 'checked' : '' %>>
                                                <div class="ml-3">
                                                    <div class="flex items-center text-gray-900 font-medium">
                                                        <i class="fas fa-robot mr-2 text-blue-500"></i>
                                                        Disable Automatic Processing
                                                    </div>
                                                    <p class="text-sm text-gray-500 mt-1">Determines if the AI will run on its own or every scan is started manually</p>
                                                </div>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                                
                                <hr class="my-6"/>
                                <!-- Limit Functions Section -->
                                <section class="space-y-6">
                                    <h2 class="text-xl font-bold flex items-center gap-2 text-primary mb-4">
                                        <i class="fas fa-tasks"></i>
                                        AI Function Limits
                                    </h2>
                                    <div class="space-y-4">
                                        <div class="space-y-2">
                                            <label class="text-sm font-medium">Enable/Disable AI Functions</label>
                                            <p class="text-sm text-gray-500 mb-4">Select which functions the AI should perform during document analysis</p>
                                            
                                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                                <div class="border border-gray-200 shadow-sm rounded-lg hover:border-blue-500 transition-colors duration-200">
                                                    <label for="activateTagging" class="flex items-center p-4 cursor-pointer w-full">
                                                        <input type="checkbox" 
                                                            id="activateTagging" 
                                                            name="activateTagging" 
                                                            class="w-5 h-5 text-blue-600 rounded border-gray-300 focus:ring-blue-500"
                                                            <%= config.ACTIVATE_TAGGING === 'yes' ? 'checked' : '' %>>
                                                        <div class="ml-3">
                                                            <div class="flex items-center text-gray-900 font-medium">
                                                                <i class="fas fa-tags mr-2 text-blue-500"></i>
                                                                Tags Assignment
                                                            </div>
                                                            <p class="text-sm text-gray-500 mt-1">Automatically assign relevant tags to documents</p>
                                                        </div>
                                                    </label>
                                                </div>
                                                
                                                <div class="border border-gray-200 shadow-sm rounded-lg hover:border-blue-500 transition-colors duration-200">
                                                    <label for="activateCorrespondents" class="flex items-center p-4 cursor-pointer w-full">
                                                        <input type="checkbox" 
                                                            id="activateCorrespondents" 
                                                            name="activateCorrespondents" 
                                                            class="w-5 h-5 text-blue-600 rounded border-gray-300 focus:ring-blue-500"
                                                            <%= config.ACTIVATE_CORRESPONDENTS === 'yes' ? 'checked' : '' %>>
                                                        <div class="ml-3">
                                                            <div class="flex items-center text-gray-900 font-medium">
                                                                <i class="fas fa-user mr-2 text-blue-500"></i>
                                                                Correspondent Detection
                                                            </div>
                                                            <p class="text-sm text-gray-500 mt-1">Identify document senders automatically</p>
                                                        </div>
                                                    </label>
                                                </div>
                                                
                                                <div class="border border-gray-200 shadow-sm rounded-lg hover:border-blue-500 transition-colors duration-200">
                                                    <label for="activateDocumentType" class="flex items-center p-4 cursor-pointer w-full">
                                                        <input type="checkbox" 
                                                            id="activateDocumentType" 
                                                            name="activateDocumentType" 
                                                            class="w-5 h-5 text-blue-600 rounded border-gray-300 focus:ring-blue-500"
                                                            <%= config.ACTIVATE_DOCUMENT_TYPE === 'yes' ? 'checked' : '' %>>
                                                        <div class="ml-3">
                                                            <div class="flex items-center text-gray-900 font-medium">
                                                                <i class="fas fa-file-alt mr-2 text-blue-500"></i>
                                                                Document Type Classification
                                                            </div>
                                                            <p class="text-sm text-gray-500 mt-1">Determine the type of document automatically</p>
                                                        </div>
                                                    </label>
                                                </div>
                                                
                                                <div class="border border-gray-200 shadow-sm rounded-lg hover:border-blue-500 transition-colors duration-200">
                                                    <label for="activateTitle" class="flex items-center p-4 cursor-pointer w-full">
                                                        <input type="checkbox" 
                                                            id="activateTitle" 
                                                            name="activateTitle" 
                                                            class="w-5 h-5 text-blue-600 rounded border-gray-300 focus:ring-blue-500"
                                                            <%= config.ACTIVATE_TITLE === 'yes' ? 'checked' : '' %>>
                                                        <div class="ml-3">
                                                            <div class="flex items-center text-gray-900 font-medium">
                                                                <i class="fas fa-heading mr-2 text-blue-500"></i>
                                                                Title Generation
                                                            </div>
                                                            <p class="text-sm text-gray-500 mt-1">Generate meaningful titles for documents</p>
                                                        </div>
                                                    </label>
                                                </div>
                                                <div class="border border-gray-200 shadow-sm rounded-lg hover:border-blue-500 transition-colors duration-200">
                                                    <label for="activateCustomFields" class="flex items-center p-4 cursor-pointer w-full">
                                                        <input type="checkbox" 
                                                            id="activateCustomFields" 
                                                            name="activateCustomFields" 
                                                            class="w-5 h-5 text-blue-600 rounded border-gray-300 focus:ring-blue-500"
                                                            <%= config.ACTIVATE_CUSTOM_FIELDS === 'yes' ? 'checked' : '' %>>
                                                        <div class="ml-3">
                                                            <div class="flex items-center text-gray-900 font-medium">
                                                                <i class="fas fa-filter mr-2 text-blue-500"></i>
                                                                Custom Fields
                                                            </div>
                                                            <p class="text-sm text-gray-500 mt-1">Add custom fields to the documents</p>
                                                        </div>
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </section>
                                <!-- Custom Fields Section -->
                                <section class="space-y-6">
                                    <h2 class="text-xl font-bold flex items-center gap-2 text-primary mb-4">
                                        <i class="fas fa-table text-blue-500"></i>
                                        Custom Fields
                                    </h2>
                                    <div class="space-y-4">
                                        <div id="customFieldsList" class="space-y-2">
                                            <% if (config.CUSTOM_FIELDS && Array.isArray(JSON.parse(config.CUSTOM_FIELDS).custom_fields)) { %>
                                                <% JSON.parse(config.CUSTOM_FIELDS).custom_fields.forEach((field, index) => { %>
                                                    <div class="custom-field-item flex items-center gap-2 p-3 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 hover:border-blue-500 transition-colors">
                                                        <div class="cursor-move text-gray-400">
                                                            <i class="fas fa-grip-vertical"></i>
                                                        </div>
                                                        <div class="flex-1">
                                                            <p class="font-medium text-gray-900 dark:text-gray-100"><%= field.value %></p>
                                                            <p class="text-sm text-gray-500 dark:text-gray-400">
                                                                Type: <%= field.data_type %>
                                                                <% if (field.data_type === 'monetary' && field.currency) { %>
                                                                    (<%= field.currency %>)
                                                                <% } %>
                                                            </p>
                                                        </div>
                                                        <button type="button" 
                                                                onclick="removeCustomField(this)"
                                                                class="text-gray-400 hover:text-red-500 transition-colors">
                                                            <i class="fas fa-trash"></i>
                                                        </button>
                                                    </div>
                                                <% }); %>
                                            <% } %>
                                        </div>

                                        <div class="grid grid-cols-12 gap-3">
                                            <div class="col-span-5">
                                                <input type="text" 
                                                    id="newFieldName" 
                                                    class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100" 
                                                    placeholder="Enter field name...">
                                            </div>
                                            
                                            <div class="col-span-3">
                                                <select id="newFieldType" 
                                                        onchange="toggleCurrencySelect()"
                                                        class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100">
                                                    <option value="string">Text</option>
                                                    <option value="float">Number</option>
                                                    <option value="integer">Integer</option>
                                                    <option value="monetary">Currency</option>
                                                </select>
                                            </div>

                                            <div class="col-span-2">
                                                <select id="currencyCode" 
                                                        class="hidden w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100">
                                                    <option value="EUR">EUR</option>
                                                    <option value="USD">USD</option>
                                                    <option value="GBP">GBP</option>
                                                    <option value="JPY">JPY</option>
                                                    <option value="CHF">CHF</option>
                                                </select>
                                            </div>

                                            <div class="col-span-2">
                                                <button type="button" 
                                                        onclick="addCustomField()"
                                                        class="w-full px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-lg focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 flex items-center justify-center gap-2">
                                                    <i class="fas fa-plus"></i>
                                                    Add
                                                </button>
                                            </div>
                                        </div>

                                        <input type="hidden" id="customFieldsJson" name="customFields" value='<%= config.CUSTOM_FIELDS || "{\"custom_fields\":[]}" %>'>
                                    </div>
                                </section>
                                <!-- System Prompt Section -->
                                <div class="border-t pt-4 space-y-4">
                                    <div class="space-y-2">
                                        <label for="systemPrompt" class="text-sm font-medium">Prompt Description</label>
                                        <div class="space-y-2">
                                            <textarea id="systemPrompt" 
                                                      name="systemPrompt"
                                                      rows="8"
                                                      class="w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                                                      placeholder="Describe how the AI should analyze your documents..."><%= config.SYSTEM_PROMPT %></textarea>
                                            <button id="systemPromptBtn" type="button" 
                                                    class="inline-flex items-center px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 focus:ring-2 focus:ring-gray-500 focus:ring-offset-2">
                                                <i class="fas fa-lightbulb mr-2"></i>
                                                Example
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </section>
        
                        <!-- Submit Button -->
                        <div class="border-t pt-6">
                            <button type="submit" class="w-full px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 flex items-center justify-center gap-2">
                                <i class="fas fa-save"></i>
                                Save Configuration
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </main>
    </div>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const apiKeyContainer = document.getElementById('apiKeyContainer');
            const copyNotification = document.getElementById('copyNotification');
            let timeoutId;
        
            apiKeyContainer.addEventListener('click', async function() {
                const apiKey = this.dataset.apiKey;
                try {
                    await navigator.clipboard.writeText(apiKey);
                    
                    // Show notification
                    copyNotification.classList.remove('hidden');
                    copyNotification.classList.add('flex');
                    
                    // Hide notification after 2 seconds
                    clearTimeout(timeoutId);
                    timeoutId = setTimeout(() => {
                        copyNotification.classList.add('hidden');
                        copyNotification.classList.remove('flex');
                    }, 2000);
                } catch (err) {
                    console.error('Failed to copy text: ', err);
                }
            });
        
            // Optional: Re-blur when mouse leaves
            apiKeyContainer.addEventListener('mouseleave', function() {
                this.classList.add('blur-sm');
            });
        
            apiKeyContainer.addEventListener('mouseenter', function() {
                this.classList.remove('blur-sm');
            });
        });
    </script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const apiKeyContainer = document.getElementById('apiKeyContainer');
        const copyNotification = document.getElementById('copyNotification');
        const regenerateBtn = document.getElementById('regenerateBtn');
        const regenerateIcon = document.getElementById('regenerateIcon');
        let timeoutId;
    
        function showNotification(message, isError = false) {
            const notificationBox = copyNotification;
            const icon = notificationBox.querySelector('i');
            const text = notificationBox.querySelector('span');
    
            // Reset classes
            notificationBox.className = 'absolute right-0 top-0 mt-12 w-64 rounded-lg p-3 border';
            icon.className = 'mr-2 fas';
    
            if (isError) {
                notificationBox.classList.add('bg-red-50', 'text-red-800', 'border-red-200');
                icon.classList.add('fa-exclamation-circle');
            } else {
                notificationBox.classList.add('bg-green-50', 'text-green-800', 'border-green-200');
                icon.classList.add('fa-check-circle');
            }
    
            text.textContent = message;
            notificationBox.classList.remove('hidden');
            notificationBox.classList.add('flex');
    
            clearTimeout(timeoutId);
            timeoutId = setTimeout(() => {
                notificationBox.classList.add('hidden');
                notificationBox.classList.remove('flex');
            }, 2000);
        }
    
        // Copy functionality
        apiKeyContainer.addEventListener('click', async function() {
            try {
                await navigator.clipboard.writeText(this.dataset.apiKey);
                showNotification('API key copied to clipboard!');
            } catch (err) {
                showNotification('Failed to copy API key!', true);
            }
        });
    
        // Blur functionality
        apiKeyContainer.addEventListener('mouseleave', function() {
            this.classList.add('blur-sm');
        });
    
        apiKeyContainer.addEventListener('mouseenter', function() {
            this.classList.remove('blur-sm');
        });
    
        // Regenerate Button functionality
        regenerateBtn.addEventListener('click', async function() {
            this.disabled = true;
            regenerateIcon.classList.add('animate-spin');
    
            try {
                const response = await fetch('/api/key-regenerate', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    }
                });
    
                if (response.ok) {
                    const data = await response.json();
                    
                    // Wait 5 seconds
                    await new Promise(resolve => setTimeout(resolve, 5000));
                    
                    // Update key container
                    apiKeyContainer.textContent = data.newKey;
                    apiKeyContainer.dataset.apiKey = data.newKey;
                    apiKeyContainer.title = data.newKey;
                    
                    showNotification('New API key generated!');
                } else {
                    throw new Error('Failed to regenerate key');
                }
            } catch (error) {
                console.error('Error:', error);
                showNotification('Failed to regenerate API key!', true);
            } finally {
                regenerateBtn.disabled = false;
                regenerateIcon.classList.remove('animate-spin');
            }
        });
    });
    </script>
    <!-- Füge dies direkt vor dem schließenden </body> Tag ein -->
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const mobileMenuButton = document.getElementById('mobileMenuButton');
            const sidebar = document.querySelector('.sidebar');
            const sidebarOverlay = document.getElementById('sidebarOverlay');
            
            function toggleSidebar(event) {
                event.stopPropagation(); // Prevent event bubbling
                sidebar.classList.toggle('active');
                sidebarOverlay.classList.toggle('active');
                
                // Toggle menu icon
                const icon = mobileMenuButton.querySelector('i');
                if (sidebar.classList.contains('active')) {
                    icon.classList.remove('fa-bars');
                    icon.classList.add('fa-times');
                } else {
                    icon.classList.remove('fa-times');
                    icon.classList.add('fa-bars');
                }
            }

            // Toggle sidebar when clicking the menu button
            mobileMenuButton.addEventListener('click', toggleSidebar);

            // Close sidebar when clicking the overlay
            sidebarOverlay.addEventListener('click', function(event) {
                event.stopPropagation(); // Prevent event bubbling
                if (sidebar.classList.contains('active')) {
                    toggleSidebar(event);
                }
            });

            // Prevent sidebar from closing when clicking inside it
            sidebar.addEventListener('click', function(event) {
                event.stopPropagation();
            });

            // Handle links in sidebar
            const sidebarLinks = document.querySelectorAll('.sidebar-link');
            sidebarLinks.forEach(link => {
                link.addEventListener('click', function(event) {
                    // Don't prevent default here to allow navigation
                    event.stopPropagation();
                });
            });
        });
    </script>
    <script>
        // get github stars count from repo
        async function getStarsCount() {
            try {
                const response = await fetch('https://api.github.com/repos/clusterzx/paperless-ai');
                if (!response.ok) throw new Error('Failed to fetch repo info');
                
                const data = await response.json();
                document.getElementById('starCount').textContent = data.stargazers_count.toLocaleString();
            } catch (error) {
                console.error('Failed to fetch stars count:', error);
            }
        }
        document.addEventListener('DOMContentLoaded', function() {
            getStarsCount();
        });
    </script>
    <script src="js/settings.js"></script>
</body>
</html>
